<template>
  <div>
    <!--名称查询-->
    <el-form
      :inline="true"
      :model="formInli" status-icon
      :rules="rules" ref="formInline"
      class="demo-form-inline"
      style="text-align: left">
      <el-form-item label="名称">
        <el-input v-model="formInli.rolename" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="formInli.state" placeholder="状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="禁用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getdata(formInli)">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetForm('formInli')">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="add()">添加
        </el-button>
      </el-form-item>
    </el-form>

    <!--添加弹出框-->
    <el-dialog
      :visible.sync="dialogVisible"
      width="550px">
      <!--:before-close="handleClose">-->
      <span>
        <el-form :model="formInline" :rules="rules" ref="formInline" label-width="80px" class="demo-ruleForm">
          <el-form-item label="名称" prop="rolename">
            <el-input v-model="formInline.rolename" width="88%"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="text">
            <el-input width="88%" type="textarea" v-model="formInline.text"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" style="display: inline-block;padding-left: 65%">
          <el-button type="primary" @click="submitForm(formInline)">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </span>
    </el-dialog>

    <!--修改弹出框-->
    <el-dialog
      :visible.sync="dialogVisibl"
      width="550px">
      <!--:before-close="handleClose">-->
      <span>
        <el-form :model="formInlin" :rules="rules" ref="formInline" label-width="80px" class="demo-ruleForm">
          <el-form-item label="名称" prop="rolename">
            <el-input v-model="formInlin.rolename" width="88%"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input width="88%" type="textarea" v-model="formInlin.text"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" style="display: inline-block;padding-left: 65%">
          <el-button type="primary" @click="updat(formInlin)">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </span>
    </el-dialog>

    <!--设置权限弹出框-->
    <el-dialog
      title="演示角色——设置权限"
      :visible.sync="dialogVisib"
      width="550px">

      <el-tree
        :data="data1"
        ref="rootTree"
        show-checkbox
        node-key="mid"
        :default-checked-keys="son"
        :props="defaultProps">
      </el-tree>
      <span slot="footer" class="dialog-footer" style="display: inline-block;padding-left: 65%">
          <el-button type="primary" @click="updatMenu">确 定</el-button>
          <el-button @click="dialogVisib = false">取 消</el-button>
      </span>
    </el-dialog>

    <!--表格-->
    <el-table
      :data="formInline"
      border
      style="width: 100%;height: 100%">
      <el-table-column
        prop="id"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="rolename"
        label="名称"
        width="150">
      </el-table-column>
      <el-table-column
        prop="text"
        label="备注"
        width="150">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="150">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            @change="open(scope.row)"
            :active-value="0"
            :inactive-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="正常"
            inactive-text="禁用">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="390">
        <template slot-scope="scope">
          <el-popconfirm title="确定要删除吗？" @confirm="handleDelete(scope.row.id)">
            <el-button size="mini" slot="reference" type="danger">删除</el-button>
          </el-popconfirm>
          <el-button
            size="mini"
            type="success"
            @click="update(scope.row.rolename,scope.row.text,scope.row.id)">修改
          </el-button>
          <el-button
            size="mini"
            type="success"
            @click="handleEdit(scope.row)">设置权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="block" style="text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInli.current"
        :page-sizes="[2, 4, 20, 50, 100, 200, 500, 1000]"
        :page-size="formInli.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'

  export default {
    data() {
      return {
        total: 0,
        dialogVisible: false,
        dialogVisibl: false,
        dialogVisib: false,
        formInline: {
          id: '',
          rolename: '',
          text: '',
          state: '',
        },
        formInlin: {
          id: '',
          rolename: '',
          text: '',
          state: '',
        },
        formInli: {
          id: '',
          rolename: '',
          text: '',
          state: '',
          current: 1,
          size: 2,
        },
        rules: {
          rolename: [
            {required: true, message: '请输入名称', trigger: 'blur'},
          ],
          text: [
            {required: true, message: '请填写活动形式', trigger: 'blur'}
          ]
        },
        data1: [{
          mid: '',
          mname: '',
          children: [{
            mid: '',
            mname: '',
          }],
        }],
        defaultProps: {
          children: 'children',
          label: 'mname'
        },
        son: [],
        id:'',
      }
    }, created() {
      this.getdata();
    },
    methods: {
      //修改确定权限
      updatMenu(row) {
        // console.log(this.$refs.rootTree.getCheckedKeys().concat(this.$refs.rootTree.getHalfCheckedKeys()));
        // console.log(this.$refs.rootTree.getCheckedKeys());
        let obj = {mid: '', roleid: ''};
        obj.mid = this.$refs.rootTree.getCheckedKeys().concat(this.$refs.rootTree.getHalfCheckedKeys());
        obj.roleid = this.id;
        // alert(obj.mid);
        this.$axios.get("usermanage/t-menu/menuUpdata?mid="+obj.mid+"&roleid="+obj.roleid).then(r => {
          if(r.data=true){
            this.$message({
              type: 'success',
              message: '修改成功!',
            });
          } else {
            this.$message({
              type: 'error',
              message: '修改失败!',
            });
          }
          this.dialogVisib = false;
        });
      },

      //设置权限
      async handleEdit(row) {
        this.$axios.post("usermanage/t-menu/menuAll").then(r => {
          this.data1 = r.data;
        });
        //角色id拿取权限 给son
        await this.$axios.get("usermanage/t-menu/menuSon?roleId=" + row.id).then(r => {
          this.son = [];
          this.id = row.id;
          for (let i = 0; i < r.data.length; i++) {
            this.son.push(r.data[i].mid);
          }
        });
        this.dialogVisib = true;
      },
      // 分页 模糊查询
      getdata() {
        this.$axios.post("usermanage/adminrole/findAllPage", qs.stringify(this.formInli)).then(r => {
          this.total = r.data.total;
          this.formInline = r.data.records;
          this.current = 1;
        })
      },
      handleSizeChange(val) {
        this.formInli.size = val;
        this.getdata();
      },
      handleCurrentChange(val) {
        this.formInli.current = val;
        this.getdata();
      },

      // 修改状态
      open(row) {
        this.$confirm('确定要禁用吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let s = row.state;
          let obj = {
            id: row.id,
            state: row.state,
          };
          //查询此角色是否有人
          this.$axios.get("usermanage/admin/findPeople?roleid="+row.id).then(rr => {
            //如果没有人 可以禁用
            if (rr.data) {
              //修改状态
              this.$axios.post("usermanage/adminrole/upState", qs.stringify(obj)).then(r => {
                if (r.data) {
                  this.getdata();
                  this.$message({
                    type: 'success',
                    message: '修改成功!',
                  });
                } else {
                  this.$message({
                    type: 'error',
                    message: '修改失败!',
                  });
                }
              });
            } else {
              this.$message({
                type: 'error',
                message: '此角色有人，禁止修改!',
              },this.getdata());
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改',
          }, this.getdata());
        });
      },

      // 重置
      resetForm(formName) {
        Object.assign(this.$data.formInli, this.$options.data().formInli);
      },

      // 添加弹出框
      add() {
        this.dialogVisible = true;
      },
      // 添加 角色,备注
      submitForm(formInline) {
        // 角色,备注 不为空
        if (formInline.rolename != null && formInline.text != null) {
          this.$axios.get("usermanage/adminrole/add?rolename=" + this.formInline.rolename + "&text=" + this.formInline.text).then(r => {
            //添加成功
            if (r.data) {
              this.dialogVisible = false;
              this.getdata();
              this.$message({
                message: '添加角色成功',
                type: 'success'
              });
            } else {
              this.$message.error('添加失败');
            }
          });
        }
        // 没有填写完整
        else {
          return false;
        }
      },

      // id删除
      handleDelete(id) {
        this.$axios.get("usermanage/admin/findPeople?roleid="+id).then(rr => {
          //如果没有人 可以删除
          if (rr.data) {
            this.$axios.get("usermanage/adminrole/delById?id=" +id).then(r => {
              //删除成功
              if (r.data) {
                this.getdata();
                this.$message({
                  message: '删除角色成功！',
                  type: 'success'
                });
              } else {
                this.$message.error('删除失败');
              }
            });
          }else {
            this.$message({
              type: 'error',
              message: '此角色有人，禁止删除!',
            })
          }
        });
      },

      //修改 角色 备注
      update(rolename, text, id) {
        this.formInlin.rolename = rolename;
        this.formInlin.text = text;
        this.formInlin.id = id;
        this.dialogVisibl = true;
      },
      updat(formInlin) {
        this.$axios.get("usermanage/adminrole/update?rolename=" + formInlin.rolename + "&text=" + formInlin.text + "&id=" + formInlin.id).then(r => {
          //修改成功
          if (r.data) {
            this.dialogVisibl = false;
            this.getdata();
            this.$message({
              message: '修改角色成功！',
              type: 'success'
            });
          } else {
            this.$message.error('修改失败');
          }
        });
      },
    }
  }
</script>

<style scoped>

</style>
